<template>
    <div class="user-my-voucher">
        <div class="header">
            <div class="header-total">{{totalScore | toYuan('int')}} <span>点</span> </div>
            <div class="header-button">
                <div class="header-button__item" @click='show_explain = true'>
                    <img src="../images/info_small_w@3x.png">
                    <p class='font-body2'>点券说明</p>
                </div>
                <div class="header-button__item" @click='goRouter("user-voucher-record")'>
                    <img src="../images/topup_history_w@3x.png">
                    <p class='font-body2'>充值记录</p>
                </div>
            </div>
        </div>

        <div class="big-title">使用记录</div>
        <loading-more
            v-model='loading'
            wrapper='.user-my-voucher'
            url='score/list'
            @complete='complete = true'
            @finish='setRecords'>
            <div class="user-money-detail-box" v-if='records.length'>
                <ul class="detail__list">
                    <li class="detail__item" v-for='item in records'>
                        <div class="detail__left">
                            <p>{{item.title}}</p>
                            <span>余额:{{ item.totalScoreBalance | toYuan('int') }}点</span>
                        </div>
                        <div class="detail__right">
                            <p><template v-if='item.totalScore>0'>+</template>{{ item.totalScore | toYuan('int') }}</p>
                            <span>{{item.createdAt | dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                        </div>
                    </li>
                </ul>
                <p class='user-list-explain' v-if='complete'>以上为全部点券使用记录</p>
            </div>
            <loading v-show='loading' :size='15'></loading>
            <p class="page-placeholder" v-if='!records.length && complete'><span>暂无点券使用记录</span></p>
        </loading-more>
        <modal
            :show='show_explain'
            class='modal-explain'
            title='点券说明'
            :closeButton='false'
            @close='show_explain = false'>
            <p class='orange'>Q：什么是点券</p>
            <p>A：点券是安牛有借用户用于各种付费增值服务的一种统计代码，不能用于安牛有借增值服务以外的任何商品和借贷业务。</p>
            <p class='orange'>Q：点券如何获得</p>
            <p>A：点券在用户充值完成后可获得，请在我-余额账户进行充值。</p>
            <p class='orange'>Q：点券如何使用</p>
            <p>A：点券可在安牛有借平台使用付费增值服务时使用。</p>
            <p class='orange'>Q：点券的有效期多长</p>
            <p>A：充值点券长期有效。</p>
            <p class='orange'>Q：点券是否可以从A账户转移到B账户</p>
            <p>A：有借不支持账户之间的点券相互转移。</p>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import loadingMore from '../components/LoadingMore.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import { timeToHours } from '../filters/filter-timeFormat'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { scoreApi, userApi, lenderApi } from '../api/api'
    import { scrollLoading, scrollLoadingOff } from '../utils/utils'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,
            loadingMore
        },
        filters:{
            toYuan,
            dateFormat,
            timeToHours,
            diffDay(time){
                let now = moment()
                let day = moment(time)
                let diff = day - now
            },

        },
        data() {
            return {
                list:{},
                records:[],
                num:1,
                totalScore:'',
                loading:false,
                show_explain:false,
                complete:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function

            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            goPhone(){
                this.$router.push({
                    name:'bind-phone'
                })
            },
            goUse(){
                this.$router.push({
                    name:'loan-in-want-use'
                })
            },
            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            setRecords(records){
                this.records = records
            },
            getBalance(){
                scoreApi.getBalance()
                .then(result=>{
                    this.totalScore = result.balance.totalScore
                })
                .catch(error=>{
                    console.error(error)
                })
            }
        },
        created(){
            this.getBalance()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-my-voucher{
        .header{
            background-color: $orange;
            color:#fff;
            margin-bottom: 8px;
            position: relative;
            overflow:hidden;
            &:after{
                content:'';
                position: absolute;
                right:-68px;
                top:50%;
                background: url(../images/bg_voucher_w@3x.png) no-repeat center right;
                background-size: 136px 100px;
                opacity:.1;
                margin-top: -50px;
                width: 136px;
                height: 100px;
            }
        }
        .header-total{
            @extend %font-headline;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            padding: 24px;
            border-bottom: 1px solid rgba(255,255,255, .1);
            span{
                display: block;
                @extend %font-body1;
            }
            
        }
        .header-button{
            display: flex;
        }
        .header-button__item{
            width: 20%;
            flex:1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding:10px;
            position: relative;
            img{
                display: block;
                width: 18px;
                height: 18px;
                margin-right: 4px;
            }
            &:after{
                content:'';
                position: absolute;
                right:0;
                height:24px;
                top:50%;
                margin-top:-12px;
                border-left:1px solid rgba(255,255,255, .1);
            }
            &:first-child{
                border-left:none;
            }
        }
        .page-placeholder{
            position: absolute;
            top:0;
            left:0;
            right:0;
        }
        padding-bottom: 40px;
        .detail__item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 20px 24px 16px 24px;
            position: relative;
            &:after{
                content:'';
                border-top: 1px solid $sectionColor;
                position: absolute;
                bottom:0;
                left:16px;
                right:16px;
            }
            &:last-child{
                &:after{
                    display: none;
                }
            }
        }
        .detail__left{
            p{
                @extend %font-subhead;
                color:$importColor;
            }
            span{
                @extend %font-caption;
                display: block;
            }
        }
        .detail__right{
            text-align: right;
            p{
                @extend %font-title; 
                color:$importColor;
            }
            span{
                @extend %font-caption;
                display: block;
            }
        }
        .modal-explain{
            @extend %font-caption;
            color:$importColor;
            p{
                padding-bottom: 10px;
                &.orange{
                    padding-bottom: 0;
                    color:$orange;
                }
            }
        }
    }

</style>
